import zoningList from "@/views/zoning/js/zoning"

let ZONING_DOM, ZONING_TYPE, ZONING_MAIN, ZONING_SEL_MAIN, ZONING_SEL_TEXT, ZONING_SEL_MAIN_LIST, ZONING_CONT, ZONING_CONT_UL,
  SELECTED_PROVINCE, SELECTED_CITY, SELECTED_AREA

// 初始化
export default function zoningInfo (id) {
  ZONING_TYPE = id
  // 获取DOM信息
  ZONING_DOM = document.getElementById(id)
  // 打开面板
  ZONING_DOM.onclick = function () {
    let ZONING_HTML = document.getElementsByClassName('myoningMain')[0]
    if (ZONING_HTML === undefined) {
      // 添加主容器
      ZONING_MAIN = document.createElement('div')
      ZONING_MAIN.classList.add('myoningMain')
      ZONING_MAIN.onmouseleave = function () {
        ZONING_MAIN.remove()
      }
      ZONING_DOM.parentNode.appendChild(ZONING_MAIN)

      // 添加选中的容器
      ZONING_SEL_MAIN = document.createElement('div')
      ZONING_SEL_MAIN.classList.add('mySelectedMain')
      ZONING_MAIN.appendChild(ZONING_SEL_MAIN)

      // 选中的说明文字
      ZONING_SEL_TEXT = document.createElement('div')
      ZONING_SEL_TEXT.textContent = '已选择：'
      ZONING_SEL_MAIN.appendChild(ZONING_SEL_TEXT)

      // 内容容器
      ZONING_CONT = document.createElement('div')
      ZONING_CONT.classList.add('mySelectedCont')
      ZONING_MAIN.appendChild(ZONING_CONT)

      // 创建UL
      ZONING_CONT_UL = document.createElement('ul')
      ZONING_CONT.appendChild(ZONING_CONT_UL)
      // 绘制节点
      zoningErgodic(zoningList)
    }
  }
}


// 遍历省
function zoningErgodic (dataList) {
  for (let i = 0; i < dataList.length; i++) {
    let ZONING_CONT_LI = document.createElement('li')
    ZONING_CONT_LI.textContent = dataList[i].name
    ZONING_CONT_LI.onclick = function () {
      SELECTED_PROVINCE = dataList[i]
      zoningSelected('SELECTED_PROVINCE')
      if (dataList[i].children !== undefined) {
        childNodesRemove()
        childNodesErgodic(dataList[i])
      }
    }
    ZONING_CONT_UL.appendChild(ZONING_CONT_LI)
  }
}


// 遍历下级
function childNodesErgodic (dataList) {
  if (dataList.children !== undefined) {
    for (let i = 0; i < dataList.children.length; i++) {
      let ZONING_CONT_LI = document.createElement('li')
      ZONING_CONT_LI.textContent = dataList.children[i].name
      ZONING_CONT_LI.onclick = function () {
        if (dataList.children[i].children !== undefined) {
          childNodesRemove()
          childNodesErgodic(dataList.children[i])
        }
        if (dataList.children[i].level === '2') {
          SELECTED_CITY = dataList.children[i]
          zoningSelected('SELECTED_CITY')
        }
        if (dataList.children[i].level === undefined) {
          SELECTED_AREA = dataList.children[i]
          zoningSelected('SELECTED_AREA')
        }
      }
      ZONING_CONT_UL.appendChild(ZONING_CONT_LI)
    }
  }
}


// 添加已选择区域数据
function zoningSelected (type) {
  ZONING_SEL_MAIN_LIST = document.createElement('div')
  ZONING_SEL_MAIN_LIST.classList.add('myTopCont')
  switch (type) {
    case 'SELECTED_PROVINCE':
      if (ZONING_SEL_MAIN.childNodes[1] !== undefined) {
        ZONING_SEL_MAIN.childNodes[1].remove()
      }
      ZONING_SEL_MAIN_LIST.id = SELECTED_PROVINCE.code
      ZONING_SEL_MAIN_LIST.textContent = SELECTED_PROVINCE.name
      break
    case 'SELECTED_CITY':
      if (ZONING_SEL_MAIN.childNodes[2] !== undefined) {
        ZONING_SEL_MAIN.childNodes[2].remove()
      }
      ZONING_SEL_MAIN_LIST.textContent = SELECTED_CITY.name
      ZONING_SEL_MAIN.appendChild(ZONING_SEL_MAIN_LIST)
      break
    case 'SELECTED_AREA':
      if (ZONING_SEL_MAIN.childNodes[3] !== undefined) {
        ZONING_SEL_MAIN.childNodes[3].remove()
      }
      ZONING_SEL_MAIN_LIST.id = SELECTED_AREA.code
      ZONING_SEL_MAIN_LIST.textContent = SELECTED_AREA.name
      break
  }
  ZONING_SEL_MAIN_LIST.onclick = function () {
    selectedCallback(type)
  }
  ZONING_SEL_MAIN.appendChild(ZONING_SEL_MAIN_LIST)
  dataExports()
}


// 删除主面板所有子节点
function childNodesRemove () {
  for(let i = ZONING_CONT_UL.children.length - 1; i >= 0; i--) {
    ZONING_CONT_UL.removeChild(ZONING_CONT_UL.children[i])
  }
}


// 选中点击回调
function selectedCallback (type) {
  switch (type) {
    case 'SELECTED_PROVINCE':
      for(let i = ZONING_SEL_MAIN.children.length - 1; i >= 1; i--) {
        ZONING_SEL_MAIN.removeChild(ZONING_SEL_MAIN.children[i])
      }
      childNodesRemove()
      SELECTED_PROVINCE = undefined
      SELECTED_CITY = undefined
      SELECTED_AREA = undefined
      zoningErgodic(zoningList)
      break
    case 'SELECTED_CITY':
      for(let i = ZONING_SEL_MAIN.children.length - 1; i >= 2; i--) {
        ZONING_SEL_MAIN.removeChild(ZONING_SEL_MAIN.children[i])
      }
      childNodesRemove()
      SELECTED_CITY = undefined
      SELECTED_AREA = undefined
      childNodesErgodic(SELECTED_PROVINCE)
      break
    case 'SELECTED_AREA':
      SELECTED_AREA = undefined
      ZONING_SEL_MAIN.childNodes[3].remove()
      break
  }
  dataExports()
}


// 数据抛出
function dataExports () {
  let DATA_OBJ = {
    province: SELECTED_PROVINCE,
    city: SELECTED_CITY,
    area: SELECTED_AREA
  }
  zoningDataExports(DATA_OBJ, ZONING_TYPE)
}



